<!-- 免费模板 -->
<template>
  <div class="container">
    <div class="free_word">
      <div class="top">
        <div class="line1"></div>
        <h1>免费模板</h1>
        <div class="line1"></div>
      </div>
      <span>用心设计每套模板，适合各行各业从业者</span>
    </div>
    <div class="free_container">
      <!-- 免费模板item -->
      <div class="item" v-for="item in templateList" :key="item.id">
        <!-- 图片 -->
        <!-- <img :src="`/src/assets/images/${item.proview}`"> -->
        <img :src="getImgUrl(item.proview)" />
        <!-- 遮罩层 -->
        <div class="mask">
          <el-button class="btn" type="success" round @click="gotoMake(item)">
            立即免费创作
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
//免费模板图片渲染的数组
import templateList from '@/template/templateList'
//处理图片地址函数
import { getImgUrl } from '@/util/common'
import { useRouter } from 'vue-router'
const router = useRouter()
function gotoMake(item: any) {
  const loginStatus=localStorage.getItem('loggedIn')
  if(loginStatus) {
    router.push({ name: 'make', query: { id: item.id, name: item.name } })
  }else {
    router.push({ name: 'login' })

  }
}
</script>
<style scoped lang="scss">
@mixin size($w, $h) {
  width: $w;
  height: $h;
}
.container {
  width: 100%;
  background-color: #f3f3f3;

  .free_word {
    @include size(100%, 200px);
    display: flex;
    flex-direction: column;
    align-items: center;
    .top {
      display: flex;
      margin-top: 50px;
      margin-bottom: 25px;
      justify-content: center;
      .line1 {
        width: 200px;
        height: 1px;
        background-color: #000;
        transform: scaleY(0.5); /* 延Y轴缩小1倍 */
        transform-origin: 50% 100%; /* 改变元素变形的原点 */
      }
      h1 {
        font-size: 32px;
        font-weight: 800;
        margin: 0 30px;
      }
    }
  }
  .free_word div:nth-child(3) {
    width: 200px;
    height: 1px;
    background-color: #bdc7d0;
  }
  .free_pic {
    @include size(100%, 100px);
  }
  .free_container {
    margin: 0 30px;
    display: grid;
    grid-gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    .item {
      position: relative;
      transition: all 0.5s ease;
      img {
        width: 100%;
        height: 100%;
      }
      .mask {
        /* 使用固定定位让元素撑满全屏 */
        @include size(100%, 100%);
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.4);
        .btn {
          position: relative;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
    .item:hover {
      transform: scale(1.1);
    }
    .item:hover .mask {
      display: block;
      box-shadow: 5px 5px 5px 10px rgb(229, 215, 215);
      cursor: pointer;
    }
  }
}
</style>
